/*
 * @Description:
 * @Author: dh
 * @Date: 2021-09-28 14:19:19
 * @LastEditors: dh
 * @LastEditTime: 2021-09-29 10:12:23
 */

/**
 * caches.open 方法新建或打开一个已存在的缓存
 * cache.addAll 方法的作用是请求指定链接的资源并把它们存储到之前打开的缓存中。
 * respondWith 方法，它可以劫持用户发出的 http 请求，并把一个 Promise 作为响应结果返回给用户
 */

/**
 * 当用户第一次访问页面的时候，资源的请求是早于 Service Worker 的安装的，所以静态资源是无法缓存的；只有当 Service Worker 安装完毕，用户第二次访问页面的时候，这些资源才会被缓存起来；
 * Cache Stroage 只能缓存静态资源，所以它只能缓存用户的 GET 请求；
 * Cache Stroage 中的缓存不会过期，但是浏览器对它的大小是有限制的，所以需要我们定期进行清理；
 */

// 方法二 (动态缓存静态资源)
self.addEventListener('fetch', function (event) {
	console.log(event.request.url)
	event.respondWith(
		caches.match(event.request).then(res => {
			return (
				res ||
				fetch(event.request)
					.then(response => {
						caches.open('sw_demo2').then(cache => {
							// 第二次加载页面报错
							cache.put(event.request, response.clone())
						})
						return response
					})
					.catch(err => {
						console.log(err)
						return caches.match('/img/天空.jpg')
					})
			)
		})
	)

	// 对于用户发起的 POST 请求，我们也可以在拦截后，通过判断请求中携带的 body 的内容来进行有选择的返回
	if (event.request.method === 'POST') {
		event.respondWith(
			new Promise(resolve => {
				event.request.json().then(body => {
					console.log(body) // 用户请求携带的内容
				})
				resolve(new Response({ a: 2 })) // 返回的响应
			})
		)
	}
})

self.addEventListener('activate', event => {
	console.log('正在激活')
})
